<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Demo - EasyQRCodeJS</title>
		<script src="../dist/easy.qrcode.min.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			
			#header{
				text-align: left;
				margin: 0;
				line-height: 80px;
				background-color: #007bff;
				color: #fff;
				padding-left: 20px;
				font-size: 36px;
			}
			
			#header a{color: #FFFF00;}
			#header a:hover{color: #FF9933;}
			#container {
				width: 1030px;
				margin: 10px auto;
			}

			.imgblock {
				margin: 10px 0;
				text-align: center;
				float: left;
				min-height: 420px;
				border-bottom: 1px solid #B4B7B4;
			}

			.qr table {
				
			}

			.title {
				font-size: 15px;
				font-weight: bold;
				color: #fff;
				text-align: center;
				width: 330px;
				margin: 10px 5px;
				height: 60px;
				background-color: #0084C6;
				line-height: 60px;
			}
            .download{
                margin-top:20px;
                display: none;
            }
		
			#footer {
				margin-top: 20px;
				border-top: 1px solid gainsboro;
				line-height: 40px;
				clear: both;
				text-align: center;
			}

			#footer a {
				color: #0084C6;
				text-decoration: none;
			}
		</style>
	</head>

	<body>
		<div id="header">
			
			EasyQRCodeJS Demo
			
			
			<div style="float: right;margin-right: 100px;">
				<a href="http://www.easyproject.cn/easyqrcodejs/tryit.html">Try It!</a>
			</div>
		</div>

		<div id="container">

		</div>
		

		<div id="footer">

			<a href="www.easyproject.cn/donation">www.easyproject.cn/donation</a>

		</div>
		
		
<a href="https://github.com/ushelp/EasyQRCodeJS" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
	</body>

</html>
<script type="text/template" id="qrcodeTpl">
			<div class="imgblock">
				<div class="title">{title}</div>
				<div class="qr" id="qrcode_{i}"></div>
                <div class="download" id="qrcode_{i}_download">
                    <button onclick="downloadQRcode('qrcode_{i}')">download</button>
                </div>
			</div>
		</script>
		<script type="text/javascript">
			var demoParams = [
				
				{
					title: "Normal",
					config: {
						text: "www.easyproject.cn/donation",

						width: 240,
						height: 240,
						quietZone: 0,
						colorDark: "#000000",
						colorLight: "#ffffff",

						//PI: '#f55066',

						correctLevel: QRCode.CorrectLevel.H // L, M, Q, H
					}
				},
				{
					title: "Color",
					config: {
						text: "www.easyproject.cn/donation",

						width: 240,
						height: 240,
						colorDark: "#473C8B",
						colorLight: "#FFFACD",

						//PI: '#f55066',

						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
                        version: 5
					}
				},
				{
					title: "DotScale",
					config: {
						text: "www.easyproject.cn/donation",
				
						width: 240,
						height: 240,
						colorDark: "#000000",
						colorLight: "#ffffff",
				
						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
				
						
						dotScale: 0.4
					}
				
				},
				{
					title: "Position Color + Alignment Color",
					config: {
						text: "www.easyproject.cn/donation",
				
						width: 240,
						height: 240,
						colorDark: "#000000",
						colorLight: "#ffffff",
				
						PI: '#BF3030',
						PO: '#269926', 
						
						AI: '#009ACD',
						AO: '#B03060',
						
				
						correctLevel: QRCode.CorrectLevel.H // L, M, Q, H
				
					}
				
				},
				{
					title: "Position Color + DotScale",
					config: {
						text: "www.easyproject.cn/donation",
				
						width: 240,
						height: 240,
						colorDark: "#000000",
						colorLight: "#ffffff",
				
						PI: '#f55066',
						PI_TL: '#b7d28d', // Position Inner - Top Left 
						PO_TL: '#aa5b71', // Position Outer - Top Right
						
				
						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
				
						
						dotScale: 0.5
					}
				
				},
				{
					title: "Timing + DotScale",
					config: {
						text: "www.easyproject.cn/donation",
						width: 240,
						height: 240,

						colorDark: "#000000",
						colorLight: "#ffffff",


						AO: '#A67C00', // Position Outer - Top Right
						AI: '#A67C00',  // Position Outer - Bottom Right

						// === Timing Pattern Color
						timing: '#e1622f',
						timing_V: '#00C12B',

						correctLevel: QRCode.CorrectLevel.H, //  L, M, Q, H

						
						dotScale: 0.4

					}
				},


				{
					title: "BackgroundImage",
					config: {
						text: "www.easyproject.cn/donation",

						width: 240,
						height: 240,
						colorDark: "#000000",

						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H

						backgroundImage: 'logo.png',
						backgroundImageAlpha: 1,
						autoColor: false,

						
						dotScale: 1

					}

				},
				
				{
					title: "Auto Color + BackgroundImage + DotScale",
					config: {
						text: "www.easyproject.cn/donation",
				
						width: 240,
						height: 240,
						colorDark: "#000000",
				
						PI: '#f55066',
				
						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
				
						backgroundImage: 'logo.png',
						autoColor: true,
						
						
						dotScale: 0.5
					}
				
				},
				
				{
					title: "AutoColor + backgroundImageAlpha",
					config: {
						text: "www.easyproject.cn/donation",
				
						width: 240,
						height: 240,
						colorDark: "#000000",
				
						PI: '#f55066',
				
						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
				
						// backgroundImage: 'logo.png',
						backgroundImage: '',
						backgroundImageAlpha: 0.3,
						autoColor: true,
				
						
						dotScale: 0.5,
						
						binarize: true
				
						
					}
				
				},
				
				{
					title: "Logo + quietZoneColor",
					config: {
						text: "www.easyproject.cn/donation", // Content

						width: 240, // Widht
						height: 240, // Height
						colorDark: "#000000", // Dark color
						colorLight: "#ffffff", // Light color
                        
                        quietZone: 15,
                        quietZoneColor: '#00CED1',

						// === Logo
						//logo: "logo-transparent.png", // LOGO
						logo: "", // LOGO
						//					logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",  
						//					logoWidth:80, 
						//					logoHeight:80,
						logoBackgroundColor: '#ffffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
						logoBackgroundTransparent: false, // Whether use transparent image, default is false


						correctLevel: QRCode.CorrectLevel.H // L, M, Q, H

					}

				},
				
				{
					title: "Logo + DotScale",
					config: {
						text: "www.easyproject.cn/donation", // Content
				
						width: 240, // Widht
						height: 240, // Height
						colorDark: "#000000", // Dark color
						colorLight: "#ffffff", // Light color
				
				
						// === Logo
						logo: "logo-transparent.png", // LOGO
						//					logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",  
						//					logoWidth:80, 
						//					logoHeight:80,
						logoBackgroundColor: '#ffffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
						logoBackgroundTransparent: false, // Whether use transparent image, default is false
				
					
						timing_V: '#00B2EE',
				
				
						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
				
						
						dotScale: 0.5
					}
				
				},
				{
					title: "Logo + Colorful",
					config: {
						text: "www.easyproject.cn/donation", // Content
				
						width: 240, // Widht
						height: 240, // Height
						colorDark: "#27408B", // Dark color
						colorLight: "#FFF8DC", // Light color
				
						// === Logo
						logo: "logo-transparent.png", // LOGO
						//					logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",  
						//					logoWidth:80, 
						//					logoHeight:80,
						logoBackgroundColor: '#FFF8DC', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
						logoBackgroundTransparent: false, // Whether use transparent image, default is false
				
						// === Posotion Pattern(Eye) Color
						PO: '#e1622f', // Global Position Outer color. if not set, the defaut is `colorDark`
						PI: '#aa5b71', // Global Position Inner color. if not set, the defaut is `colorDark`
						//					PO_TL:'', // Position Outer - Top Left 
						PI_TL: '#b7d28d', // Position Inner - Top Left 
						PO_TR: '#aa5b71', // Position Outer - Top Right 
						PI_TR: '#c17e61', // Position Inner - Top Right 
						//					PO_BL:'', // Position Outer - Bottom Left 
						//					PI_BL:'' // Position Inner - Bottom Left 
				
						// === Timing Pattern Color
						//	timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`
						timing_H: '#ff6600', // Horizontal timing color
						timing_V: '#cc0033', // Vertical timing color
				
				
						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
				
						
						dotScale: 0.5
					}
				
				},
               
				{
					title: "QuietZone + Logo + Background",
					config: {
						text: "www.easyproject.cn/donation", // Content
				
						width: 240, // Widht
						height: 240, // Height
						quietZone: 30, 
						colorDark: "#27408B", // Dark color
						colorLight: "#FFF8DC", // Light color
				
						// === Logo
						logo: "https://avatars1.githubusercontent.com/u/4082017?s=160&v=4", // LOGO
                        crossOrigin:"anonymous",
						//					logoWidth:80, 
						//					logoHeight:80,
						logoBackgroundColor: '#FFF8DC', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
						logoBackgroundTransparent: false, // Whether use transparent image, default is false
				
				
						backgroundImage: 'logo.png',
						backgroundImageAlpha: 0.3,
						autoColor: true,
						
						// === Posotion Pattern(Eye) Color
						PO: '#e1622f', // Global Position Outer color. if not set, the defaut is `colorDark`
						PI: '#aa5b71', // Global Position Inner color. if not set, the defaut is `colorDark`
						//					PO_TL:'', // Position Outer - Top Left 
						PI_TL: '#b7d28d', // Position Inner - Top Left 
						PO_TR: '#aa5b71', // Position Outer - Top Right 
						PI_TR: '#c17e61', // Position Inner - Top Right 
						//					PO_BL:'', // Position Outer - Bottom Left 
						//					PI_BL:'' // Position Inner - Bottom Left 
				
						// === Timing Pattern Color
						//	timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`
						timing_H: '#ff6600', // Horizontal timing color
						timing_V: '#cc0033', // Vertical timing color
				
				
						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H
				
						
						dotScale: 0.5
					}
				
				},
				{
					title: "Title",
					config: {
						text: "www.easyproject.cn/donation",
						width: 240,
						height: 240,

						title: 'Title',
						titleFont: "normal normal bold 18px Arial",
						titleColor: "#fff",
						titleBackgroundColor: "#3074B4",
						titleHeight: 40,
						titleTop: 25,

						colorDark: "#000000",
						colorLight: "#ffffff",


						// === Timing Pattern Color
						timing: '#e1622f',

						correctLevel: QRCode.CorrectLevel.H, //  L, M, Q, H

						
						dotScale: 0.4,
                        onRenderingEnd:function(options, dataURL){
                        	// console.info(dataURL);
                            console.log(options);
                        }
					}

				},



				// All
				{
					title: "Title + SubTitle + Colorful - SVG",
					config: {
						text: "www.easyproject.cn/donation", // Content

						width: 240, // Widht
						height: 240, // Height
						colorDark: "#000000", // Dark color
						colorLight: "#FFFACD", // Light color
                        
                        // quietZone
                        quietZone:5,

						// === Title
						title: 'Title', // Title
						titleFont: "normal normal bold 18px Arial", // Title font
						titleColor: "#004284", // Title Color
						titleBackgroundColor: "#fff", // Title Background
						titleHeight:50, // Title height, include subTitle
						titleTop: 25, // Title draw position(Y coordinate), default is 30


						// === SubTitle
						subTitle: 'subTitle', // Subtitle content
						subTitleFont: "normal normal normal 14px Arial", // Subtitle font
						subTitleColor: "#004284", // Subtitle color
						subTitleTop: 45, // Subtitle drwa position(Y coordinate), default is 50


						// === Logo
						logo: "hamburger.png", // LOGO
						//					logo:"http://127.0.0.1:8020/easy-qrcodejs/demo/logo.png",  
						//					logoWidth:80, 
						//					logoHeight:80,
						logoBackgroundColor: '#ffffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
						logoBackgroundTransparent: false, // Whether use transparent image, default is false

						// === Posotion Pattern(Eye) Color
						PO: '#e1622f', // Global Position Outer color. if not set, the defaut is `colorDark`
						PI: '#aa5b71', // Global Position Inner color. if not set, the defaut is `colorDark`
						//					PO_TL:'', // Position Outer - Top Left 
						PI_TL: '#b7d28d', // Position Inner - Top Left 
						PO_TR: '#aa5b71', // Position Outer - Top Right 
						PI_TR: '#c17e61', // Position Inner - Top Right 
						//					PO_BL:'', // Position Outer - Bottom Left 
						//					PI_BL:'' // Position Inner - Bottom Left 

						// === Timing Pattern Color
						//	timing: '#e1622f', // Global Timing color. if not set, the defaut is `colorDark`
						timing_H: '#ff6600', // Horizontal timing color
						timing_V: '#cc0033', // Vertical timing color

						// === Aligment color
						AI:'#27408B',
						AO:'#7D26CD',

						correctLevel: QRCode.CorrectLevel.H, // L, M, Q, H

						
						dotScale: 0.5,
						
						onRenderingEnd:function(options, dataURL){
							console.info(dataURL);
						},
                        drawer: 'svg'
					}

				}

			]



			var qrcodeTpl = document.getElementById("qrcodeTpl").innerHTML;
			var container = document.getElementById('container');

			for (var i = 0; i < demoParams.length; i++) {
				var qrcodeHTML = qrcodeTpl.replace(/\{title\}/, demoParams[i].title).replace(/{i}/g, i);
				container.innerHTML+=qrcodeHTML;
			}
            
            var allQRcodes={};
			for (var i = 0; i < demoParams.length; i++) {
				var qrcode = new QRCode(document.getElementById("qrcode_"+i), demoParams[i].config);
                allQRcodes["qrcode_"+i] = qrcode;
                var downloadDivs = document.getElementsByClassName("download");
                for(var j=0; j<downloadDivs.length; j++){
                    downloadDivs[j].style.display='block'
                }
			}
            
            function downloadQRcode(qrcodeId){
                var qrcode = allQRcodes[qrcodeId];
                qrcode.download(qrcodeId); 
                
            }
		</script>